<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>积分商城商品管理</title>
    <script src="../commonCss.js"></script>
    <script src="../commonJs.js"></script>
    <link rel="stylesheet" href="../../css/common.css">
</head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <div class="ctc_title">积分商城商品管理</div>
    <div class="down_line"></div>
</section>

<!-- Main content -->
<section class="content" >
    <div class="row">
        <div class="col-xs-12">
            <div class="box-header">
                <form class="form-inline">
                    <div class="form-group">
                        <label>查询：</label>
                        <select id="flag" class="form-control" style="text-align: center;font-size: 12px ;width:110px;">
                            <option value="">全部</option>
                            <option value="1">京东购物卡</option>
                            <option value="2">电话充值卡</option>
                            <option value="3">实物</option>
                        </select>&nbsp;&nbsp;
                        <input style="width: 200px;" class="form-control" type="text" id="searchKey"  placeholder="输入商品名称搜索"/>
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="getData()"  class="btn btn-block btn-primary">搜索</button>
                    </div>
                    <div style="float: right ">
                        <div class="form-group" style="margin-right: 20px;">
                            <button type="button" onclick="addInfo()" class="btn btn-block btn-primary" >新增</button>
                        </div>
                    </div>

                </form>
            </div>

            <div class="box-body" style="height:100%;">
                <table id="dataList" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>商品图片</th>
                            <th>商品名称</th>
                            <th>商品类型</th>
                            <th>商品单价（元）</th>
                            <th>所需积分</th>
                            <th>库存数量</th>
                            <th>状态</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody >
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- 【编辑】弹出窗内容 -->
<div class="modal" id="editPanel" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 50%;height: 40%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" align="center" id="mopTitle"></h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" onsubmit="return false" id="form">
                    <fieldset  style="margin-top:2%;">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group" >
                            <label class="col-md-2 control-label" style="color: red">*商品名称</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="必填项" type="text" name="name" id="goodsName" >
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label" >商品类型</label>
                            <div class="col-md-10">
                                <select id="type" name="type" class="form-control" style="text-align: center;font-size: 12px ;width:110px;" onchange="goodCatetary()">
                                    <option value="1">京东购物卡</option>
                                    <option value="2">电话充值卡</option>
                                    <option value="3">实物</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"  style="color: red">*商品单价（元）</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="必填项" type="number" name="money" id="money" min="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"  style="color: red">*所需积分</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="必填项" type="number" name="point" id="point" min="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label"  style="color: red">*库存数量</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="必填项" type="number" name="number" id="number" min="0" >
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label" style="color: red">*商品图片</label>
                            <div class="col-md-10">
                                <div style='float: left;margin-right: 7px;'><img id='pictue1'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile1'  name='file1' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(1)'/>
                                </div>&nbsp;

                                <div id="div_pic2" style='float: left;margin-right: 7px;display: none;'><img id='pictue2'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile2'  name='file2' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(2)'/>
                                </div>&nbsp;

                                <div id="div_pic3" style='float: left;margin-right: 7px;display: none;'><img id='pictue3'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile3'  name='file3' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(3)'/>
                                </div>&nbsp;

                                <br/>
                                <!--<input type="file" id="uploadFile" name="file" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic()"/>-->
                                <input class="form-control" type="hidden" name="picture1" id="picture1" >
                                <input class="form-control" type="hidden" name="picture2" id="picture2">
                                <input class="form-control" type="hidden" name="picture3" id="picture3">

                                <input class="form-control" type="hidden" name="picture" id="picture">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label" >商品状态</label>
                            <div class="col-md-10">
                                <select id="status" name="status" class="form-control" style="text-align: center;font-size: 12px ;width:110px;">
                                    <option value="0">上架</option>
                                    <option value="1">下架</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" >排序</label>
                            <div class="col-md-10">
                                <input class="form-control" type="number" name="sort" id="sort">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label" >兑换须知</label>
                            <div class="col-md-10">
                                <textarea class="form-control" rows="8" cols="6" name="remark" id="remark"></textarea>
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-md-2 control-label">使用说明</label>
                            <div class="col-md-10">
                                <textarea class="form-control" rows="8" cols="6" name="instruction" id="instruction"></textarea>
                            </div>
                        </div>

                        <div class="form-group" id="div_detail" style="display: none;">
                            <label class="col-md-2 control-label" >详情图片</label>
                            <div class="col-md-10">
                                <div style='float: left;margin-right: 7px;'><img id='pictue4'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile4'  name='file4' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(4)'/>
                                </div>&nbsp;

                                <div id="div_pic5" style='float: left;margin-right: 7px;display: none;'><img id='pictue5'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile5'  name='file5' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(5)'/>
                                </div>&nbsp;

                                <div id="div_pic6" style='float: left;margin-right: 7px;display: none;'><img id='pictue6'  style='width: 128px;height: 88px;' onclick=maxPic(this.src)>
                                    <input type='file' id='uploadFile6'  name='file6' style='width:100px;' accept='image/png,image/gif,image/jpeg,image/jpg' onchange='uploadPic(6)'/>
                                </div>&nbsp;

                                <br/>
                                <!--<input type="file" id="uploadFile" name="file" accept="image/png,image/gif,image/jpeg,image/jpg" onchange="uploadPic()"/>-->
                                <input class="form-control" type="hidden" name="picture4" id="picture4" >
                                <input class="form-control" type="hidden" name="picture5" id="picture5">
                                <input class="form-control" type="hidden" name="picture6" id="picture6">

                                <input class="form-control" type="hidden" name="detailPicture" id="detailPicture">
                            </div>
                        </div>

                    </fieldset>
                </form>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmEditConfig();">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 【图片点击放大】弹出窗内容 -->
<div class="modal" id="picMonthDialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" align="center">商品</h4>
            </div>
            <img id="maxPic" width="100%">
        </div>
    </div>
</div>
<!-- page script -->
<script>
    $(document).ready(function() {
        //加载数据
        getData();

    });

    // 加载数据
    function getData(){
        var table = $('#dataList').DataTable({
            "destroy": true,   //可以重新初始化，用于搜索
            "lengthChange": false,
            "ordering": false,   //排序
            "info": true,		   //
            "autoWidth": false,   //宽度自动
            "paging": true,      //分页
            "searching": false,  //全局搜索关闭
            "processing": true,  //开启显示‘正在加载.../processing’
            "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
            "bPaginate": false, //开关，是否显示分页器
            "bLengthChange": false, //开关，是否显示每页显示多少条数据的下拉框
            "ajax" :  {
                url:"/point/getPointMallList",
                type:"POST",
                data:{
                     key : $("#searchKey").val(),
                     flag : $("#flag").val()
                },
                dataSrc: function (myJson) {
                    return myJson.data.data;
                }
            },
            //参数显示
            "columns": [
                {"data": "picture", 'sClass': "text-center",'width': '2%',
                    "render": function ( data, type, full, meta ) {
                      var img = data.split("$")[0];
                        return "<img style='width: 100px;height: 52px; ' src='"+img+"' onclick=maxPic('"+img+"')>";
                    }
                },
                {"data": "name", 'sClass': "text-center",'width': '8%'},
                {"data": "type", 'sClass': "text-center",'width': '5%',
                    "render": function ( data, type, full, meta ) {
                        if(data == 1){
                            return "京东购物卡";
                        }else if(data == 2){
                            return "电话充值卡";
                        }else{
                            return "实物";
                        }
                    }
                },
                {"data": "money", 'sClass': "text-center",'width': '5%'},
                {"data": "point", 'sClass': "text-center",'width': '5%'},
                {"data": "number", 'sClass': "text-center",'width': '5%'},
                {"data": "status", 'sClass': "text-center",'width': '3%',
                    "render":function( data, type, full, meta) {
                        var str="";
                        if(data == 1){
                            str += "<span class='label label-danger' style='padding-left:10px;padding-right:10px;padding-top: inherit;'>下架</span>";
                        }else{
                            str += "<span class='label label-success' style='padding-left:10px;padding-right:10px;padding-top: inherit;' >已上架</span> ";
                        }
                        return str;
                    }
                },
                {"data": "sort", 'sClass': "text-center",'width': '3%'},
                {"data": "id" , 'sClass': "text-center" ,'width':'4%',
                    "render": function (data, type, full, meta ) {
                        var str = "<a href = '#' title='修改' onclick=editData(" + data +");><i class='\glyphicon glyphicon-pencil'></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                        str += "<a href = '#' title='删除' onclick=deleteData(" + data +");><i class='\glyphicon glyphicon-trash'></i></a>";
                        return str;
                    }
                }
            ],

            //是否开启主题
            "bJQueryUI": true,
            "oLanguage": {    // 语言设置
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "检索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            }
        });
    }

    //编辑
    function editData(id) {
        $("#detailPicture").val("");
        $("#pictue1").attr("src",null);
        $("#pictue2").attr("src",null);
        $("#pictue3").attr("src",null);

        $("#picture1").val("");
        $("#picture2").val("");
        $("#picture3").val("");

        $.ajax({
            type:"POST",
            url:"/point/getPointMallById",
            async : true,//默认就是true
            dataType:"json",
            data:{id : id},
            success : function(res) {
                var data = res.data.mall;
                $("#id").val(data.id);
                $("#goodsName").val(data.name);
                $("#money").val(data.money);
                $("#pictue").attr("src",data.picture);
                $("#point").val(data.point);
                $("#type").val(data.type);
                $("#number").val(data.number);
                $("#status").val(data.status);
                $("#sort").val(data.sort);

                $("#remark").val(data.remark);
                $("#instruction").val(data.instruction);

                //实物展示详情图片
                if (data.type == 3) {
                    $("#div_detail").css("display","block");
                }else{
                    $("#div_detail").css("display","none");
                }
                var imgs =data.picture.split("$");
                $("#pictue1").attr("src",imgs[0]);
                $("#picture1").val(imgs[0]);
                if (imgs.length == 1){
                    $("#div_pic2").css("display","none");
                    $("#div_pic3").css("display","none");
                }
                if(imgs.length >= 2){
                    $("#pictue2").attr("src",imgs[1]);
                    $("#div_pic2").css("display","block");
                    $("#picture2").val(imgs[1]);
                }
                if(imgs.length >= 3){
                    $("#pictue3").attr("src",imgs[2]);
                    $("#div_pic3").css("display","block");
                    $("#picture3").val(imgs[2]);
                }

                //实物图片详情
                if (data.detailPicture != ''){
                    var detailImgs =data.detailPicture.split("$");
                    $("#pictue4").attr("src",detailImgs[0]);
                    $("#picture4").val(detailImgs[0]);
                    if (detailImgs.length == 1){
                        $("#div_pic4").css("display","none");
                        $("#div_pic5").css("display","none");
                    }
                    if(detailImgs.length >= 2){
                        $("#pictue5").attr("src",detailImgs[1]);
                        $("#div_pic5").css("display","block");
                        $("#picture5").val(detailImgs[1]);
                    }
                    if(detailImgs.length >= 3){
                        $("#pictue6").attr("src",detailImgs[2]);
                        $("#div_pic6").css("display","block");
                        $("#picture6").val(detailImgs[2]);
                    }
                }

            }
        });
        $("#mopTitle").text("编辑商品");
        $("#editPanel").modal("show");//弹窗打开
    }

    //打开新增窗口
    function addInfo() {
        $("#div_pic2").css("display","none");
        $("#div_pic3").css("display","none");
        $("#div_detail").css("display","none");

        $("#pictue1").attr("src",null);
        $("#pictue2").attr("src",null);
        $("#pictue3").attr("src",null);
        $("#pictue4").attr("src",null);
        $("#pictue5").attr("src",null);
        $("#pictue6").attr("src",null);

        $("#picture1").val("");
        $("#picture2").val("");
        $("#picture3").val("");
        $("#picture4").val("");
        $("#picture5").val("");
        $("#picture6").val("");

        $("#id").val("");
        $("#goodsName").val("");
        $("#money").val("");
        $("#point").val("");
        $("#type").val("1");
        $("#number").val("");
        $("#status").val("0");
        $("#sort").val("");
        $("#remark").val("");
        $("#instruction").val("");
        $("#detailPicture").val("");

        $("#mopTitle").text("新增商品");
        $("#editPanel").modal("show");//弹窗打开
    }

    //保存
    function confirmEditConfig(){
        var goodsName = $("#goodsName").val();
        var money = $("#money").val();
        var point = $("#point").val();
        var number = $("#number").val();

        var picture1 = $("#picture1").val();
        var picture2 = $("#picture2").val();
        var picture3 = $("#picture3").val();

        var picture4 = $("#picture4").val();
        var picture5 = $("#picture5").val();
        var picture6 = $("#picture6").val();

        var str = "";
        if (picture1 != ''){
            str += picture1 + "$";
        }
        if (picture2 != ''){
            str = str + picture2 + "$";
        }
        if (picture3 != ''){
            str = str + picture3 ;
        }
        $("#picture").val(str);

        //实物图片详情拼接
        var detailStr = "";
        if (picture4 != ''){
            detailStr += picture4 + "$";
        }
        if (picture5 != ''){
            detailStr = detailStr + picture5 + "$";
        }
        if (picture6 != ''){
            detailStr = detailStr + picture6;
        }
        $("#detailPicture").val(detailStr);

        if(goodsName == ""){
            layer.msg("商品名称不能为空！");
            return ;
        }
        if(money == ""){
            layer.msg("商品单价不能为空！");
            return ;
        }else if(money <= 0){
            layer.msg("商品单价必须大于0！");
            return ;
        }

        if(point == ""){
            layer.msg("商品所需积分不能为空！");
            return ;
        }else if(point <= 0){
            layer.msg("商品所需积分必须大于0！");
            return ;
        }

        if(number == ""){
            layer.msg("商品库存不能为空！");
            return ;
        }else if(number <= 0){
            layer.msg("商品库存必须大于0！");
            return ;
        }

        if(picture == ""){
            layer.msg("商品图片不能为空！");
            return ;
        }

        var formdata = $("#form").serializeObject();

        $.ajax({
            type : 'post',
            url : "/point/updPointMall",
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(formdata),
            success : function(data) {
                layer.msg(data.message);
                $("#editPanel").modal("hide");
                getData();
            }
        });
    }

    //类别选择事件，选择实物可以最多上传三张图片，虚拟商品只能上传一张图片
    function goodCatetary(){
        var type = $("#type").val();
        if (type == 3){
            $("#div_pic2").css("display","block");
            $("#div_pic3").css("display","block");
            $("#div_detail").css("display","block");
        } else{
            $("#div_pic2").css("display","none");
            $("#div_pic3").css("display","none");
            $("#div_detail").css("display","none");
        }
    }


    //上传图片
    function uploadPic(flag) {
        var formData=new FormData();
        if (flag == 1){
            formData.append("pic",document.getElementById("uploadFile1").files[0]);
        } else if (flag == 2) {
            formData.append("pic",document.getElementById("uploadFile2").files[0]);
        }else if (flag == 3){
            formData.append("pic",document.getElementById("uploadFile3").files[0]);
        }else if (flag == 4){
            formData.append("pic",document.getElementById("uploadFile4").files[0]);
        }else if (flag == 5){
            formData.append("pic",document.getElementById("uploadFile5").files[0]);
        }else if (flag == 6){
            formData.append("pic",document.getElementById("uploadFile6").files[0]);
        }

        formData.append("type",4);
        $.ajax({
            type : 'post',
            url : "/upload/uploadPicFile",
            data:formData,
            contentType: false,
            processData: false,
            success : function(data) {
                let url = data.data.url;
                if (flag == 1){
                    $("#pictue1").attr("src",url);
                    $("#picture1").val(url)
                } else if (flag == 2) {
                    $("#pictue2").attr("src",url);
                    $("#picture2").val(url)
                }else if (flag == 3){
                    $("#pictue3").attr("src",url);
                    $("#picture3").val(url)
                }else if (flag == 4){
                    $("#pictue4").attr("src",url);
                    $("#picture4").val(url)
                }else if (flag == 5){
                    $("#pictue5").attr("src",url);
                    $("#picture5").val(url)
                }else if (flag == 6){
                    $("#pictue6").attr("src",url);
                    $("#picture6").val(url)
                }

            }
        });
    }

    //删除
    function deleteData(id){
        if(confirm("确定要删除吗？")){
            $.ajax({
                type:"POST",
                url:"/point/deletePointMall",
                async : true,//默认就是true
                dataType:"json",
                data:{id : id},
                success : function(data) {
                    if(!data.error){
                        layer.msg(data.message);
                        getData();
                    }else{
                        layer.msg(data.message);
                    }

                }
            });
        }
    }


</script>
</body>
</html>
